<template>
  <el-card>
    <div slot="header">
      <h3>修改售价-单据查看</h3>
    </div>
    <div>
      <BtnRender :render="renderBtnsBar" />
      <el-divider />
      <!-- 发起原因输入框 -->
      <LaunchReasonInput isDisabled label="售价调价原因" :reason.sync="launchReason" />
      <el-row>
        <SkusTable
          ref="skusTable"
          showPagination
          :tableHeight="480"
          :defaultMinWidth="100"
          :dataSource="TableInfo.list"
          :columns="TableInfo.columns"
          :loading="TableInfo.loading"
          :pageSizes="pageSizes"
          :pagination="pagination"
          :total="pagination.total"
          @pageChange="handlePageChange"
          @pageSizeSelect="handlePageSizeChange"
        />
      </el-row>
      <FooterFields :footerFields="footerFields" />
    </div>
  </el-card>
</template>
<script>
import BtnRender from '@/components/JSXRender/BtnRender';
import SkusTable from '@/components/skusTable';
import LaunchReasonInput from '@/components/LaunchReasonInput';
import FooterFields from '@/pages/commodity/components/FooterFields';
import { TABLE_COLUMNS } from './constants/recordView';
import { getListPageBtnsBar } from '@/utils/getBtnsRender';
import { TableInfo } from '@/utils/getUtils';
import { createExcelByExport, generateUuid } from '@/utils/bizUtils';
import skusPage from '@/mixins/commodity/skusPage';
import {
  pagerQueryRecordDetailService,
  exportRecordDetailService
} from '@/api/finance/salePriceManage/editSalePrice';
import { get4FormDetailService } from '@/api/public';
export default {
  mixins: [skusPage],
  components: {
    BtnRender,
    SkusTable,
    LaunchReasonInput,
    FooterFields
  },
  data () {
    return {
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
      btnLoading: { export: false },
      launchReason: '', // 发起原因
      recordNo: '',
      pageSizes: [10, 100, 1000],
      footerFields: {}, // 表尾字段
    }
  },
  mounted () {
    this.recordNo = this.$route?.query?.recordNo
    this.setQueryRecordDetail()
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const btnsBar = [
        {
          label: '模板导出',
          method: this.handleExport,
          loading: this.btnLoading.export,
          disabled: this.TableInfo.isNullList()
        }
      ]
      return getListPageBtnsBar(h, btnsBar)
    },
    // 模板导出
    async handleExport () {
      const data = { recordNo: this.recordNo }
      const loadingFn = state => { this.btnLoading.export = state }
      const res = await exportRecordDetailService(data, loadingFn)
      createExcelByExport({ excelTitle: `修改售价-单据查看_${generateUuid()}`, res })
    },
    // 设置单据详情数据
    async setQueryRecordDetail () {
      this.getTableData()
      this.setInfoDetails()
    },
    // 获取表格数据
    async getTableData () {
      const data = { recordNo: this.recordNo, ...this.paginationParams }
      const res = await pagerQueryRecordDetailService(data, this.TableInfo.setLoading)
      if (res?.retData) {
        this.TableInfo.setList(res.retData?.results)
        this.setTotalNum(res.retData?.totalNum)
      }
    },
    // 设置信息数据
    async setInfoDetails () {
      const data = { recordNo: this.recordNo }
      const res = await get4FormDetailService(data)
      if (res?.retData) {
        this.footerFields = res.retData
        this.launchReason = res.retData?.launchReason
      }
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-divider--horizontal {
  margin: 10px 0;
}
</style>
